<template>
  <div class="page gray-page">
    <nav-bar title="事件记录" theme="white" message></nav-bar>
    <div class="list-main page-main" style="margin-top: 44px">
      <van-sticky :offset-top="44">
        <van-tabs v-model="searchForm.eventStatus" @click="$refs.eventList.getList(1)">
          <van-tab title="全部" name=""></van-tab>
          <van-tab v-for="(item, key) in tab" :key="key" :title="item.description" :name="item.code"></van-tab>
        </van-tabs>
      </van-sticky>
      <van-sticky :offset-top="88">
        <van-search
          v-model="searchForm.eventDescription"
          placeholder="请输入需要搜索的事件标题或内容"
          background="#F6F6F6"
          :left-icon="searchLeftIcon"
          clearable
          @search="$refs.eventList.getList(1)"
        />
      </van-sticky>
      <van-sticky class="page-scroll" :offset-top="132">
        <event-list ref="eventList" :searchForm="searchForm"></event-list>
      </van-sticky>
    </div>
  </div>
</template>
<script>
import Event from '@/api/event'
import EventList from '@/components/Widget/Event/list'
export default {
  components: { EventList },
  data() {
    return {
      searchLeftIcon: require('@/assets/images/basic/searchbar_search@2x.png'),
      tab: [],
      searchForm: {
        eventStatus: '',
        eventDescription: '',
        pageNumber: 1,
        recordSize: 0,
        pageSize: 10
      }
    }
  },
  created() {
    this.searchForm.eventStatus = this.$route.query.eventStatus
    this.getTab()
  },
  mounted() {},
  methods: {
    getTab() {
      Event.Init.tab().then(res => {
        if (res.data.status === 0) {
          this.tab = res.data.data
          this.$nextTick(() => {
            this.searchForm.eventStatus = this.$route.query.eventStatus
          })
        }
      })
    }
  }
}
</script>
<style scoped lang="less">
@import '~@/assets/style/list.less';
</style>
